<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="element-ui/lib/theme-chalk/index.css"/>
    <script src="js/vue.min.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios.min.js"></script>


    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;
            height: 80vh;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
    </style>


</head>
<body>

<div id="app">
    <el-container>
        <el-header>
               <h1 style="text-align: center; color: #ef08e2;" >>>>UFO贴吧<<<</h1>
            </el-header>
        <el-main>
            <el-row  style="margin-top: 100px;">
                <el-col :span="12" :offset="6">
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" :offset="6">
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="账号">
                            <el-input v-model="form.username"></el-input>
                        </el-form-item>

                        <el-form-item label="密码">
                            <el-input v-model="form.password"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">登录</el-button>
                            <el-button>取消</el-button>
                            <a href="/register.html" style="color: #ef08e2">没有账号点击注册</a>
                        </el-form-item>
                    </el-form>

                </el-col>
            </el-row>


        </el-main>
    </el-container>

</div>
</body>

<script>
    let vu = new Vue({
        el: "#app",
        data: {
            form: {
                username: '',
                password: ''
            }

        },
        methods: {

            /*提交表单数据*/
            onSubmit() {

                axios.get(`/account/${vu.form.username}/${vu.form.password}/`).then(resp=>{

                    let bl = resp.data;

                    if(bl){ //登录成功

                        //跳转到贴吧首页
                        window.location.assign("/index.html");

                    }else{ //失败

                        alert("账号或密码错误")

                    }

                });


            }
        },
        created() {


        }

    })

</script>
</html>